<template>
    <div>
        <h1>{{msg}}</h1>
        <button @click="change">反转</button>
        <div class="page">
            <counter></counter>
        </div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
        <div class="page"></div>
    </div>
</template>

<script>
import counter from '../components/counter.vue'
export default {
    name: 'VueFirst',
    components:{ counter },
   

    data() {
        return {
            msg:'我是谁'
        };
    },

    methods: {
        change(){
            this.msg = this.msg.split('').reverse().join('')
        }
    },
    beforeCreate() {
        console.log('beforeCreate')
    },
    created() {
        console.log('created')
    },
    beforeMount() {
        console.log(' beforeMount')
    },
    mounted() {
        console.log('mounted')
    },
    beforeUpdate() {
        console.log(' beforeUpdate')
    },
    updated() {
        console.log('updated')
    },
    beforeDestroy() {
        console.log('beforeDestroy')
    },
    destroyed() {
        console.log('destroyed')
    },
};
</script>

<style lang="stylus">

.page{
    height 50vh
    border 2px solid red
    display flex
    flex-direction column
    justify-content space-between
    font-size 40px

    &:nth-child(even){
        background-color:lightblue
    }

    // &:hover{
    //     opacity .5
    // }

    &::before{
        content  'before'
    }
    &::after{
        content  'after'
    }
}

</style>